<template>
  <div class="left">
    <div class="left_box" v-for="(i, k) in leftList" :key="k">
      <div class="list_title">{{ i.title }}</div>
      <ul class="list">
        <li
          class="list_item"
          :class="{ list_item1: current == item.index }"
          v-for="item in i.child"
          :key="item.name"
          @click="changeitem(item)"
        >
          <a-icon type="clock-circle" v-if="item.isIcon" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
      <!-- <div class="list_add"></div> -->
    </div>
  </div>
</template>

<script>
export default {
  inject: ["leftList"],
  data() {
    return {
      current: 1,
    };
  },
  methods: {
    changeitem(i) {
      this.current = i.index;
      this.$emit("changeItem", i);
    },
  },
};
</script>

<style scoped>
.left {
  margin-left: 20px;
  background-color: #fff;
  margin-right: 20px;
  border-radius: 10px;
  overflow: hidden;
}
.left_box {
  width: 200px;
  /* border: 1px solid #ccc; */
  overflow: hidden;
  color: #fff;
}
.list_title {
  background: #099ee4;
  padding: 8px 12px;
  text-align: center;
}
.list {
  color: #444;
}
.list_add {
  text-align: center;
  background: #099ee4;
  padding: 4px 12px;
  margin-top: 120px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}
.list_item {
  border-bottom: 1px solid #ccc;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background-color: #fff;
}
.list_item1 {
  background-color: rgb(230, 235, 242);
}
.list_item span {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 8px;
}
</style>